<template>
  <div>
    <el-select v-model="typeId" placeholder="类别">
      <el-option
        v-for="item in typeList"
        :key="item.tupeId"
        :label="item.typeName"
        :value="item.typeId"
      >
      </el-option>
    </el-select>
    <el-input
      v-model="clientCode"
      placeholder="请输入内容"
      style="width: 200px; margin-left: 20px"
    ></el-input>
    <el-checkbox v-model="checked" style="margin-left: 20px"
      >显示禁用客户</el-checkbox
    >
    <el-button
      type="primary"
      style="margin-left: 20px"
      @click="getClients(1, 5)"
      >查询</el-button
    >
    <el-table
      :data="pageInfo.list"
      @selection-change="handleSelectionChange"
      ref="singleTable"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column
        width="100"
        prop="typeName"
        label="类别"
      ></el-table-column>
      <el-table-column
        width="100"
        prop="clientCode"
        label="编号"
      ></el-table-column>
      <el-table-column
        width="300"
        prop="clientName"
        label="名称"
      ></el-table-column>
      <el-table-column width="100" prop="remark" label="备注"></el-table-column>
    </el-table>
    <el-pagination
      style="position: relative; left: 30px"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.pageNum"
      :page-size="pageInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageInfo: "",
      typeList: "",
      clientCode: "",
      clientName: "",
      selectedRow: null,
      clientId: "",
    };
  },
  methods: {
    handleSelectionChange: function (selection) {
      if (selection.length > 1) {
        // 如果选择了多行，取消第一行的选择
        this.$refs.singleTable.toggleRowSelection(selection[0], false);
      }
      // 更新选中行的数据
      this.selectedRow = selection[selection.length - 1];
      const clientName = selection.map((item) => item.clientName);
      this.clientId = selection.map((item) => item.clientId);
      this.clientName = clientName;
      console.log(this.clientId);
    },
    getTypes: function () {
      this.axios({
        url: "/info/type/selectAll",
      }).then((rs) => {
        console.log(rs);
        this.typeList = rs.data.typeList;
      });
    },
    handleCurrentChange(val) {
      this.getClients(val, 5);
    },
    getClients: function (pageNum, pageSize) {
      // alert(this.typeId)
      this.axios({
        url: "/info/client/getClientPage",
        params: {
          pageNum: pageNum,
          pageSize: pageSize,
          clientTypeId: this.typeId,
          clientCode: this.clientCode,
        },
      }).then((rs) => {
        this.pageInfo = rs.data.pageInfo;
        console.log(rs);
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
  created: function () {
    this.getClients(1, 5);
    this.getTypes();
  },
};
</script>

<style scoped>
/* 合计行整体样式修改开始 */
.el-table /deep/ .el-table__footer-wrapper tbody td {
  background-color: #fff1d4;
}

.el-table /deep/ .el-table__body tr:hover > td {
  background-color: #fff1d4;
}
</style>